<template>
    <v-layout type="main">
        <el-steps :active="active" v-if="active != 9" simple class="my-steps">
            <el-step title="基本信息" icon="el-icon-edit"></el-step>
            <el-step title="上传文件" icon="el-icon-upload"></el-step>
            <el-step title="完成" icon="el-icon-picture"></el-step>
        </el-steps>
        <el-form ref="form" :model="addForm" :rules="submitRules" label-width="120px" class="alick-add-form">
            <div v-if="active == 1 || active == 9">
                <el-form-item label="版本" prop="version">
                    <el-input type="text" v-model="addForm.version" readonly />
                </el-form-item>
                <el-form-item label="提交信息" prop="commit_msg">
                    <el-input type="textarea" :rows="6" v-model="addForm.commit_msg" />
                </el-form-item>
            </div>
            <div v-if="active == 2 || active == 9">
                <el-form-item label="数据来源" prop="file_source">
                    <el-radio-group v-model="addForm.file_source">
                        <el-radio :label="1">本地上传</el-radio>
                        <el-radio :label="2">S3接入</el-radio>
                    </el-radio-group>
                    <wrapUploader @succeedOver="succeedOver" type="model" :taskId="path" :biz_id="bizId"
                        v-if="addForm.file_source == 1" />
                    <div class="outin-input" v-if="addForm.file_source == 2">
                        <el-select size="mini" v-model="addForm.s3_access_id">
                            <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                            </el-option>
                        </el-select>
                        <span class="outin-input-name-title">路径</span>
                        <el-input size="mini" v-model="addForm.s3_path" class="entrance" />
                    </div>
                </el-form-item>
            </div>
            <!-- <el-form-item label=" " prop=" " v-if=" addForm.file_source ==1 ">
                <wrapUploader @succeedOver="succeedOver" type="model" :taskId="path" :bizId="bizId" />
            </el-form-item>
            <div class="outin-input" v-if=" addForm.file_source ==2 ">
                <div class="outin-input-name">
                  <el-select size="mini" v-model="addForm.s3_access_id">
                    <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                    </el-option>
                  </el-select>
                </div>
                <span class="outin-input-name-title">路径</span>
                <el-input size="mini" v-model="addForm.s3_path" class="entrance" />
              </div> -->


            <div v-show="active == 3">
                <p class="succeed-hit" v-if="$route.query.id">模型版本修改成功</p>
                <p class="succeed-hit" v-else>模型版本创建成功</p>
                <div class="succeed-btn">
                    <a href="javascript:;" @click="toDetail">立即前往</a>
                </div>
            </div>
            <el-form-item label=" ">
                <el-button class="none-type" @click="addModelVersion" v-if="active == 1">下一步</el-button>
                <el-button class="none-type" @click="submit" v-if="active == 2 || active ==9 ">确定</el-button>
            </el-form-item>

        </el-form>
    </v-layout>
</template>
  
<script>
import { addModelVersion, putModelVersion, getModelVersionDetail } from '@/api/modelversion'
import { getAllAssetS3 } from '@/api/inout'
export default {
    data() {
        return {
            active: 1,
            addForm: { file_source: 1 },
            model: {},
            submitRules: {
                commit_msg: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
            },
            path: this.$route.query.id,
            bizId: this.$route.query.id,
            model_id: this.$route.query.model_id,
            market_model_version_id: this.$route.query.market_model_version_id,
            version: this.$route.query.version,
            experimentID: this.$route.query.experimentID,
            taskID: this.$route.query.taskID,
            taskVersionID: this.$route.query.taskVersionID,
            s3Options: [],
        };
    },
    async created() {
        this.getDetail()
        this.getS3Option()
        console.log('modelID', this.modelID)
    },
    mounted() { },
    destroyed() { },
    methods: {

        /**
         * 提交
         */
        async submit() {
            console.log(this.addForm)
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.addForm.id) {
                        await putModelVersion({ ...this.model, ...this.addForm })
                    } else {
                        alert(this.$route.query.modelID)
                        await addModelVersion({ ...this.addForm })
                    }
                    this.active = 3
                    this.toDetail()
                }
            })
        },
        async addModelVersion() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.addForm.model_id = this.$route.query.modelID
                    let ret = await addModelVersion({ ...this.addForm })
                    this.addForm = ret.data
                    this.bizId = ret.data.id
                    this.active =2                     
                    if(this.experimentID){
                        this.addForm.business_id = this.experimentID
                        this.addForm.business_type = 1
                    }
                    if(this.taskVersionID){
                        this.addForm.business_id = this.taskVersionID
                        this.addForm.business_type = 2
                    }
                }
            })
        },
        async getS3Option() {
            let res = await getAllAssetS3({})
            this.s3Options = res.data
        },
        toDetail() {
            let query = {
                id: this.addForm.model_id,
                source_version_id: this.addForm.id
            }
            this.$router.push({
                path: '/model/code',
                query
            })
        },
        async getDetail() {
            if (this.$route.query.id) {
                let res = await getModelVersionDetail({ id: this.$route.query.id })
                console.log(res)
                this.model = res.data
                console.log(this.addForm)
                this.addForm = {...this.addForm, ...this.model}
                this.active =9 
                console.log(this.addForm)
            } if (this.market_model_version_id) { //如果是fork
                
            } else {
                if (this.model_id) this.addForm.model_id = this.model_id
                if (this.version) this.addForm.version = 'v' + this.version                    
                if(this.experimentID){
                    this.addForm.business_id = this.experimentID
                    this.addForm.business_type = 1
                }
                if(this.taskVersionID){
                    this.addForm.business_id = this.taskVersionID
                    this.addForm.business_type = 2
                }
            }
        },
        succeedOver(data) {
            console.log(data)
        },
    },
};
</script>
<style lang="less" scoped>
.el-form {
    margin-top: 20px;
}

.succeed-hit {
    text-align: center;
    line-height: 120px;
    font-size: 28px;
    font-weight: bold;
    padding-top: 80px;
}

.succeed-btn {
    width: 120px;
    margin: 40px auto 0;

    a {
        display: block;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        background: #409EFF;
        color: #FFF;
    }
}

.outin-input {
    display: flex;

    .outin-input-name-title {
        width: 64px;
        text-align: center;
    }
}
</style>